<template>
  <div class="swiper-container" ref="cur">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="(carousel, index) in list" :key="carousel.id">
        <img :src="carousel.imgUrl" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
//引入轮播 seiper 
import Swiper from 'swiper';

export default {
  name: "Carousel",
  props:['list'],
    watch:{
    // //监听bannerList 数据的变化：因为这条数据发生变化---由空数组变为数组里面有四个元素
    list:{
      immediate:true,//立即执行开启
      handler(newValue, oldValue){
        //现在咋们通过 watch 监听bannerList属性的属性值变化
        //如果执行handler 方法,代表组件实例身上这个属性的属性已经有了【数组：四个元素】
        //当前这个函数执行：只能保证 bannerlist 数据已经有了，但是你没办法保证v-for 已经执行结束了
        // v-for 执行完毕，才有结构【你现在在watch当中没办法保证的】
        //nextTick:在下次DOM更新 循环结束之后 执行延迟回调。 在  修改数据之后  立即使用这个方法 ，获取更新后的DOM。
        this.$nextTick(()=>{
          //当你执行这个回调的时候：保证 服务器数据回来了， v-for 执行完毕了【轮播图的结构一定有了 】
          var mySwiper = new Swiper(this.$refs.cur,{
            loop:true,
            //如果需要分页
             pagination:{ 
              el:".swiper-pagination",
              //点击小球的时候也切换图片
              clickable:true,
            },
            //如果需要前进后退按钮
            navigation:{
              nextEl:".swiper-button-next",
              prevEl:".swiper-button-prev",
            }, 
          });
       });
      },
      
    },
  },
};
</script>

<style>
</style>